<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="res/lib/cos-js-sdk-v5.min.js"></script>
    <script src="res/lib/tim-js.js"></script>
    <script src="res/lib/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="res/css/main.css">

</head>
<body>
<div class="body">
    <div class="menus">
        <img class="photo" id="userAvatar">
        <ul id="menus">
            <li class="selected" menu="conversation" id="conversationMenu">
                <div class="icon a">
                    <sup>99</sup>
                </div>
            </li>
            <li menu="group" id="groupMenu">
                <div class="icon b">
                </div>
            </li>
            <li menu="friend" id="friendMenu">
                <div class="icon c">
                </div>
            </li>
            <li menu="blacklist" id="blacklistMenu">
                <div class="icon d">
                </div>
            </li>
        </ul>
    </div>
    <div class="controls" id="controls">
        <div class="area conversation" control="conversation" id="conversationArea">
            <div class="top"> </div>
            <div class="bottom" id="conversationList" > </div>
        </div>
        <div class="area" id="groupArea" control="group">
            <div class="top">
                <button class="add" type="button" id="addGroup">+</button>
            </div>
            <div class="bottom" id="groupList"> </div>
        </div>
        <div class="area friend" id="friendArea" control="friend">
            <div class="top">
                <button class="add" type="button" id="addFriend">+</button>
            </div>
            <div class="bottom"><ul id="friendList" class="userList"></ul>
            </div>
        </div>
        <div class="area blacklist" id="blacklistArea" control="blacklist">
            <div class="top">
            </div>
            <div class="bottom" id="blacklist"> </div>
        </div>
    </div>
    <div class="talk" id="talk">
        <div class="tit" id="talkTitle"></div>
        <div class="mess" id="messList">

        </div>
        <div class="emojiBox"  id="emojiBox" >
        </div>
        <div class="bigEmojiBox" id="bigEmojiBox" >
        </div>
        <div class="input">
            <div class="tools" >
                <span class="a" name="emoji" id="toolsEmoji"></span>
                <span class="e" name="bigEmoji" id="toolsBigEmoji"></span>
                <span class="b" name="image" id="toolsImage"></span>
                <span class="d" name="file" id="toolsFile"></span>
                <span class="c" name="video" id="toolsVideo"></span>

                <input type="file" accept=".jpg, .jpeg, .png, .gif, .bmp" id="imagePicker" style="display: none" />
                <input type="file"   id="filePicker" style="display: none" />
                <input type="file" accept=".mp4" id="videoPicker" style="display: none" />
            </div>
            <textarea maxlength="100" id="textarea"></textarea>
            <button type="button" id="sendMess"></button>
        </div>
    </div>
</div>

</body>
<script type="module" src="res/js/main.js"></script>
</html>
